class: center, middle, inverse, title-slide .title[ # {detourr} ] .subtitle[ ## Interactive and performant tour visuals for the web ] .author[ ### Casper Hart ] .date[ ### 2022-03-25 ] --- # Tours in R The {tourr} package has a comprehensive set of tour path generators and display methods, with some limitations: - Portability - Interactivity - Performance - Extensibility We want to address these limitations... --- # ... and we want to avoid this <img src="data:image/png;base64,#tour_html.gif" width="100%" /> --- # Introducing {detourr}
--- # Portability {detourr} visuals are written in TypeScript / JavaScript, using {HTMLWidgets} to work with R. It runs well with: - Any browser - The RStudio viewer - VScode webview - Knitr (with html output) - Shiny - {xarignan} slides --- # Interactivity - orbit controls
--- # Interactivity - selection and brushing
--- # Linked selection with {crosstalk}
--- # Interactivity - timeline
--- # Performance .pull-left[ ## Scripting - Modern Javascript JIT compilation - Tensorflow.js for linear algebra (WebAssembly backend coming soon) ## Rendering - Three.js / WebGL for GPU-accelerated rendering ] .pull-right[ <img src="data:image/png;base64,#rick-bobby-will-ferrell.gif" /> <img src="data:image/png;base64,#v8.svg" width="100" height="100" /> <img src="data:image/png;base64,#spidermonkey.svg" width="100" height="100" /> <img src="data:image/png;base64,#tensorflow.svg" width="100" height="100" /> <img src="data:image/png;base64,#webassembly.svg" width="100" height="100" /> <img src="data:image/png;base64,#webgl.svg" height="100" /> <img src="data:image/png;base64,#three.svg" height="100" /> ] --- # User API {detour} has a declarative API for building a tour visual. Under the hood the `detour` object is stored as a `tibble`: ```r # remotes::install_github("casper-hart/detour@v0.0.2") ``` ```r detour( olive, tour_aes(projection = palmitic:eicosenoic, colour = region) ) ``` ``` #> # A tibble: 0 × 2 #> # … with 2 variables: is_new_basis <lgl>, projection_matrix <list> ``` --- # User API ```r detour( olive, tour_aes(projection = palmitic:eicosenoic, colour = region) ) |> tour_path(grand_tour(3)) ``` ``` #> # A tibble: 545 × 2 #> is_new_basis projection_matrix #> <lgl> <list> #> 1 TRUE <dbl [8 × 3]> #> 2 FALSE <dbl [8 × 3]> #> 3 FALSE <dbl [8 × 3]> #> 4 FALSE <dbl [8 × 3]> #> 5 FALSE <dbl [8 × 3]> #> 6 FALSE <dbl [8 × 3]> #> 7 FALSE <dbl [8 × 3]> #> 8 FALSE <dbl [8 × 3]> #> 9 FALSE <dbl [8 × 3]> #> 10 FALSE <dbl [8 × 3]> #> # … with 535 more rows ``` --- # User API ```r p <- detour( olive, tour_aes(projection = palmitic:eicosenoic, colour = region) ) |> tour_path(grand_tour(3)) |> show_scatter() class(p) ``` ``` #> [1] "show_scatter_3d" "htmlwidget" ``` --- # Displays - `show_scatter()`
--- # Displays - `show_sage()`
--- # Displays - `show_slice()`
--- # Extensibility